//创建了一个新modules，它的结构同Vuex是一样的。
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default {
  state: {
    hasRoute: false, //菜单和动态路由是否加载配置过的。
    //菜单数据存储
    menuList: [],
    //权限数据存储
    permList: [],

    //存储选项卡数组: 点击菜单触发路由，动态添加一个新的选项卡到数组
    //选项卡，默认是有一个首页
    TabsList: [
      {
        icon: 'el-icon-s-home',
        title: '首页',
        name: 'Index',
      },
    ],
    //记录选项卡激活的标识:
    TabsValue: 'Index', //选项卡数组中，默认被激活的是“首页”
  },
  mutations: {
    //存储菜单的方法
    SET_MENULIST: (state, menus) => {
      //将菜单存入到sessionStorage
      sessionStorage.setItem("menuList",JSON.stringify(menus))
      state.menuList = menus
    },
    //存储权限的方法
    SET_PERMLIST: (state, authoritys) => {
      state.permList = authoritys
    },
    //修改hasRoute值的方法
    SET_HASROUTE: (state, hasRoute) => {
      state.hasRoute = hasRoute
    },
    //添加选项卡到 TabsList 数组中。
    ADD_TABS: (state, tab) => {
      //判断新选项卡 是否已经存在，如果存在，找到这个选项卡的下标
      let index = state.TabsList.findIndex(item => item.name === tab.name)

      if (index === -1) {
        state.TabsList.push(tab) //添加新的选项卡到 数组中
      }

      //激活当前的选项卡,讲当前选项的name赋值给 TabsValue激活的标识。
      state.TabsValue = tab.name
    },
    //设置当前激活的选项卡 标识( tabName )
    SET_ACTIVE_TAB: (state, tabName) => {
      state.TabsValue = tabName
    },
  },
}
